<template>
   <div class="detail">
    <van-nav-bar  title="店铺" left-text="返回"  left-arrow @click-left="backnext"/>
    <div class="one" :style="{background:`url(${shopinfo.info  &&  shopinfo.info.poi_back_pic_url})`}">
      <div class="name">  
        <img :src="shopinfo.info && shopinfo.info.picUrl" alt="">
        <span style="margin-bottom: 15px;">{{ shopinfo.info && shopinfo.info.name}}</span>
        <div class="like">
          <van-icon name="like-o" />
          <!-- <van-icon name="like" @click="likes"  v-else/> -->
        </div>
      </div>
        <div class="inpu">
          <input type="text" placeholder="搜索">
          <span>点餐</span>
          <span>评价{{ shopinfo.info && shopinfo.info.wmPoiScore}}</span>
          <span>商家</span>
        </div>
        <div class="business">
          <span>商家配送{{shopinfo.info && shopinfo.info.deliveryTimeTip}}</span>
          <span>|</span>
          <span>距离{{shopinfo.info && shopinfo.info.distance}}</span>
        </div>
    </div>
 <div class="tew"> 
      <div class="left">
        <div @click="goodlist(index)" class="lefts" v-for="(item,index) in shopinfo.taglist" :key="index">{{item.name}}</div>
      </div>
      <div class="right">
        <div  class="item" v-for="(item,index) in shopinfo.taglist&&shopinfo.taglist[currentIndex].goodlist" :key="index">
          <img :src="item.picture" alt="">
          <div class="right1">
            <div class="names">{{item.name}}</div>
            <span class="min_price">￥{{item.min_price}}</span>
            <span class="month_saled_content">{{item.month_saled_content}}</span>
            <span class="promotion_info">{{item.promotion_info}}</span>
            <span>{{item.unit}}</span> <br>                                    
            <span class="rights"> <button class="add">+</button></span>
          </div>
        </div>
      </div>
</div>
    <!-- <div class="three">
      <div class="nones" v-show="onSubmits" >
        <div class="tops">
          <span style="font-size: 20px;margin-left: 10px;">已选商品</span> 
          <span class="del" @click="clear">清空</span>
        </div>
         <div  class="item" v-for="(item,index) in shopcartlist" :key="index">
          <img :src="item.picture" alt="">
          <div class="right1">
            <div class="names">{{item.name}}</div>
            <span class="min_price">￥{{item.min_price}}</span>
            <span class="month_saled_content">{{item.month_saled_content}}</span>
            <span class="promotion_info">{{item.promotion_info}}</span>
            <span>{{item.unit}}</span> <br>
            <span class="rights"><button >--</button> <span >{{item.count}}</span> <button >+</button></span>
          </div>
        </div>
      </div>
     
    </div>  -->
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import {shop_shopinfo ,shop_fav,shop_unfav,shopcart_add,shopcart_list,shopcart_clear,shopcart_sub} from "../api/api";
import { Dialog } from 'vant';
import { Toast } from 'vant';
// import 'vant/es/dialog/style';
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
var $router=useRouter()
var $route=useRoute()
var currentIndex=ref(0)
var shopinfo=ref([])

// var shouchangstatus=ref(true)
// var userid=ref(null)
// var show=ref(false)
var shopcartlist=ref([])
// var onSubmits=ref(false)
// var zongjia=ref(null)
var goodlist=(index)=>{
    console.log(index);
    currentIndex.value=index
}
// var onSubmit=()=>{
//     onSubmits.value =! onSubmits.value
// }
// var showPopup=()=>{
//     show.value=true
// }
var backnext=()=>{
    $router.go(-1)
}
onMounted(()=>{
    shop_shopinfo({params:{id:$route.params.id}}).then((res)=>{
        if(res.data.code==200){
            shopinfo.value=res.data.shopinfo
            console.log(res.data.shopinfo);
            console.log(res.data.shopinfo.taglist);
        }else if(res.data.code==400){
            $router.go(-1)
        }
    })

})


</script>

<style scoped>
.add{
  margin-left:60px ;
}
.del{
  margin-left: 65%;
}
.cross{
  text-align: right;
}
.like{
  text-align: right;
  font-size: 20px;
  margin-right: 10px;
}
.one{
  padding: 10px;
  background-size:cover ;
  color: white;
}
.name{
  margin-bottom: 20px;
  font-size: 18px;
}
.name img{
  width: 30.8px;
  height: 30.8px;
  vertical-align: middle;
  border-radius:50% ;
}
.inpu input{
  width: 80px;
  height: 25px;
  border-radius:30px ;
  text-align: center;
  margin-right: 20px;
}
.inpu span{
  margin-right: 20px;
}
.business{
  width: 345px;
  height: 70px;
  margin-top: 10px;
  background-color: white;
  color: black;
  border-radius:10px ;
  line-height: 50px;
}
.left{
  width: 35%;
  height: 380px;
  overflow: auto;
}
.lefts{
  margin-bottom: 20px;
}
.tew{
  display: flex;
}
.right{
  width: 65%;
  height: 350px;
  overflow:auto ;
}
.item img{
  width: 100px;
  height: 100px;
}
.item{
  display: flex;
  margin-bottom: 20px;

}
.right1 span{
margin-right: 5px;
}
.rights button{
  width: 25px;
  height: 25px;
  border-radius:50% ;
  text-align: center;
  line-height: 25px;
  background-color: red;
  color: white;
  border: none;
}
.rights{
  margin: 0px 30px;
  text-align: right;
}
.nones{
  width: 100%;
  height: 80%;
  background-color: rgb(231, 231, 231);
  position: absolute;
  left: 0;
  top: 20%;
  border-radius: 20px 20px 0px 0px ;
 
 overflow: auto;
}
</style>